<template>
  <div ref="containerRef" class="container"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { initEcharts, disposeEcharts, echarts } from "@/config/echartsUtil";
const containerRef = ref(null);
let myChart = null;
let intervalId = null;
const init = () => {
  const data = [
    {
      value: 335,
      name: "直接访问",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#29F19C" },
          { offset: 1, color: "#02A1F9" },
        ]),
      },
    },
    {
      value: 234,
      name: "联盟广告",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FF887C" },
          { offset: 1, color: "#B6325F" },
        ]),
      },
    },
    {
      value: 1548,
      name: "搜索引擎",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FAD126" },
          { offset: 1, color: "#FF544F" },
        ]),
      },
    },
  ];

  const option = {
    series: [
      {
        type: "pie",
        animation: true,
        label: {
          show: true,
        },
        labelLine: {
          show: true,
        },
        radius: "50%", // 调整饼状图大小
        data,
      },
    ],
  };
  myChart = initEcharts(containerRef.value, option);
  let currentIndex = 0;
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: currentIndex,
  });
  intervalId = setInterval(() => {
    // 取消之前选中的项
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });

    // 更新索引
    currentIndex = (currentIndex + 1) % data.length;

    // 高亮当前项
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
  }, 3000);
};
onBeforeUnmount(() => {
  //   销毁实例;

  disposeEcharts(myChart);
  clearInterval(intervalId);
});
onMounted(() => {
  init();
});
</script>
<style lang="less" scoped></style>
